<template>
        <div>
            <TypeNav></TypeNav>
              <!-- 购物车列表 -->
        <div class="cart">
            <h4>全部商品</h4>
            <div class="cart-main">
                <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th3">单价（元）</div>
                <div class="cart-th4">数量</div>
                <div class="cart-th5">小计（元）</div>
                <div class="cart-th6">操作</div>
                </div>
                <div class="cart-body">
        
        
                <ul class="cart-list" v-for="cart in cartInfoList" :key="cart.id">
                    <li class="cart-list-con1">
                    <input type="checkbox" name="chk_list" :checked="cart.isChecked" @click="updateOneCheck(cart)">
                    </li>
                    <li class="cart-list-con2">
                    <img :src="cart.imgUrl">
                    <div class="item-msg">{{cart.skuName}}</div>
                    </li>
                    
                    <li class="cart-list-con4">
                    <span class="price">{{cart.skuPrice}}</span>
                    </li>
                    <li class="cart-list-con5">
                    <a href="javascript:void(0)" class="mins" @click="changeCartNum(cart,-1,true)">-</a>
                    <input autocomplete="off" type="text" :value="cart.skuNum" minnum="1" class="itxt" @change="changeCartNum(cart,$event.target.value*1,false)">
                    <a href="javascript:void(0)" class="plus" @click="changeCartNum(cart,1,true)">+</a>
                    </li>
                    <li class="cart-list-con6">
                    <span class="sum">{{cart.skuNum * cart.skuPrice}}</span>
                    </li>
                    <li class="cart-list-con7">
                    <a href="javascript:;" class="sindelet" @click="deleteOne(cart)">删除</a>
                    <br>
                    <a href="#none">移到收藏</a>
                    </li>
                </ul>
                </div>
            </div>
            <div class="cart-tool">
                <div class="select-all">
                <input class="chooseAll" type="checkbox" v-model="isCheckAll">
                <span>全选</span>
                </div>
                <div class="option">
                <a href="javascript:;" @click="deletetAll">删除选中的商品</a>
                <a href="#none">移到我的关注</a>
                <a href="#none">清除下柜商品</a>
                </div>
                <div class="money-box">
                <div class="chosed">已选择
                    <span>{{checkedNum}}</span>件商品</div>
                <div class="sumprice">
                    <em>总价（不含运费） ：</em>
                    <i class="summoney">{{allMoney}}</i>
                </div>
                <div class="sumbtn">
                    <router-link class="sum-btn" to="/Trade">结算</router-link>
                </div>
                </div>
            </div>
        </div>
        </div>
</template>

<script>
import {mapGetters} from 'vuex';
export default {
    mounted() {
        this.getShopCartInfo()
    },
    methods: {
        getShopCartInfo() {
            this.$store.dispatch('getShopCartInfo');
        },
        async changeCartNum(cart,disNum,flag) {
            let originNum = cart.skuNum
            if (flag) {
                if(originNum + disNum < 1) {
                    disNum = 1 - originNum
                }
            }else {
                    if(disNum < 1) {
                        disNum = 1 - originNum
                    }else {
                        disNum = disNum - originNum 
                    }
                }
            try {
                await this.$store.dispatch('addOrUpdateShopCart', {skuId: cart.skuId,skuNum: disNum}); 
                this.getShopCartInfo()
            } catch (error) {
                alert(error.message)
            }
        },
        //购物车选中状态
        async updateOneCheck(cart) {
            try {
                await this.$store.dispatch('updateCartIscheck', {skuId: cart.skuId,isChecked: cart.isChecked ? 0 : 1});
                this.getShopCartInfo();
            } catch (error) {
                console.log(error.message);
            }
        },
        //删除单个购物车
        async deleteOne(cart) {
            try {
               await this.$store.dispatch('deleteShopCart', cart.skuId);
               this.getShopCartInfo();
            } catch (error) {
                console.log(error.message);
            }
        },
        async deletetAll() {
            try {
                await this.$store.dispatch('deleteShopCartAll');
                this.getShopCartInfo();
            } catch (error) {
                console.log(error.message);
            }
        }
    },
    computed: {
        ...mapGetters(['cartInfo']),
        cartInfoList() {
            return this.cartInfo.cartInfoList || []
        },
        checkedNum() {
            return this.cartInfoList.reduce((prev,item) => {
                if(item.isChecked) {
                    prev += item.skuNum; 
                }
                return prev
            },0)
        },
        allMoney() {
             return this.cartInfoList.reduce((prev,item) => {
                if(item.isChecked) {
                    prev += item.skuNum * item.skuPrice; 
                }
                return prev
            },0)
        },
        //计算全选
        isCheckAll: {
            get() {
                // console.log('qqqq',this.cartInfoList.every(item => item.isChecked));
                return this.cartInfoList.every(item => item.isChecked)
            },
            async set(val) {
                try {
                    await this.$store.dispatch('updateCartIscheckAll', val?1:0);
                    this.getShopCartInfo();
                } catch (error) {
                    alert(error.message)
                }
            }
        }
        
    }
}
</script>

<style lang="less" scoped>
.cart{
    width: 1200px;
    margin: 0 auto;
    h4{
        margin: 9px 0;
        font-size: 14px;
        line-height: 21px;
    }
    .cart-main{
        .cart-th{
            background: #f5f5f5;
            border: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;
            &>div{
                float: left;
            }
            .cart-th1{
                width: 25%;
                input{
                    vertical-align: middle;
                }
                span{
                    vertical-align: middle;
                }
            }
            .cart-th2{
                width: 25%;
            }
            .cart-th3,.cart-th4,.cart-th5,.cart-th6{
                width: 12.5%;
                
            }
        }
        .cart-body{
            margin: 15px 0;
            border: 1px solid #ddd;
            .cart-list{
                padding: 10px;
                border-bottom: 1px solid #ddd;
                overflow: hidden;
                &>li{
                    float: left;
                }
                .cart-list-con1{
                    width: 4.1667%;
                }
                .cart-list-con2{
                    width: 25%;
                    img{
                        width: 82px;
                        height: 82px;
                        float: left;
                    }
                    .item-msg{
                        float: left;
                        width: 150px;
                        margin: 0 10px;
                        line-height: 18px;
                    }
                }
                .cart-list-con3{
                    width: 20.8333%;
                    .item-txt{
                        text-align: center;
                    }
                }
                .cart-list-con4{
                    width: 12.5%;
                    
                }
                .cart-list-con5{
                    width: 12.5%;
                    .mins{
                        border: 1px solid #ddd;
                        border-right: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }
                    input{
                        border: 1px solid #ddd;
                        width: 40px;
                        height: 33px;
                        float: left;
                        text-align: center;
                        font-size: 14px;
                    }
                    .plus{
                        border: 1px solid #ddd;
                        border-left: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }
                }
                .cart-list-con6{
                    width: 12.5%;
                    .sum{
                        font-size: 16px;
                    }
                }
                .cart-list-con7{
                    width: 12.5%;
                    a{
                        color: #666;
                    }
                }
            }
        }
    }
    .cart-tool{
        overflow: hidden;
        border: 1px solid #ddd;
        .select-all{
            padding: 10px;
            overflow: hidden;
            float: left;
            span{
                vertical-align: middle;
            }
            input{
                vertical-align: middle;
            }
        }
        .option{
            padding: 10px;
            overflow: hidden;
            float: left;
            a{
                float: left;
                padding: 0 10px;
                color: #666;
            }
        }
        .money-box{
            float: right;
            .chosed{
                line-height: 26px;
                float: left;
                padding: 0 10px;
            }
            .sumprice{
                width: 200px;
                line-height: 22px;
                float: left;
                padding: 0 10px;
                .summoney{
                    color: #c81623;
                    font-size: 16px;
                }
            }
            .sumbtn{
                float: right;
                a{
                    display: block;
                    position: relative;
                    width: 96px;
                    height: 52px;
                    line-height: 52px;
                    color: #fff;
                    text-align: center;
                    font-size: 18px;
                    font-family: "Microsoft YaHei";
                    background: #e1251b;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>